<template>
  <div>
    <div style="width: 40%; float: left">
      <!-- 折线图查询框 -->
      <el-row style="text-align: left; margin-bottom: 10px">
        <el-date-picker
          v-model="year"
          type="year"
          placeholder="选择年"
          :editable=false
        ></el-date-picker>
        <el-button icon="el-icon-search" @click="drawCharts()">查询</el-button>
      </el-row>

      <!-- 折线图 -->
      <el-row>
        <div id="Lost" :style="{ width: '450px', height: '400px' }"></div>
      </el-row>
    </div>
    <div style="width: 60%; float: left">
      <!-- 流失表查询框 -->
      <el-row style="text-align: left; margin-bottom: 10px" id='lostTable'>
        <el-select v-model="com_id" clearable placeholder="请选择客户名称" style="width:240px">
          <el-option
            v-for="com in comList"
            :key="com.com_id"
            :label="com.com_name"
            :value="com.com_id"
            style="width:240px"
          >
          </el-option>
        </el-select>

        <el-select v-model="user_id" clearable placeholder="请选择客户经理"  style="width:240px">
          <el-option
            v-for="user in userList"
            :key="user.user_id"
            :label="user.user_name"
            :value="user.user_id"
            style="width:240px"
          >
          </el-option>
        </el-select>
        <el-button icon="el-icon-search" @click="searchLost()">查询</el-button>
      </el-row>
      <el-row>
        <!-- 流失列表 -->
        <el-table
          ref="LostList"
          :data="LostListData"
          highlight-current-row
          stripe
          border
        >
          <el-table-column
            type="index"
            label="序号"
            align="center"
          ></el-table-column>

          <el-table-column
            property="company.com_name"
            label="公司名称"
            align="center"
          ></el-table-column>
          <el-table-column
            property="users.user_name"
            label="客户负责人"
            align="center"
          ></el-table-column>
          <el-table-column
            property="lost_reason"
            label="流失原因"
            align="center"
          ></el-table-column>
          <el-table-column
            property="lost_date"
            label="流失时间"
            align="center"
          ></el-table-column>
        </el-table>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //客户流失表格数据
      LostListData: [],

      //查询下拉框中客户经理
      userList: [],

      // 查询值
      year: "",
      user_id: "",
      com_id: "",
      //查询时下拉框中客户/公司
      comList: [],
    };
  },
  methods: {
    searchLost() {
      this.$axios
        .get("/lost", {
          params: {
            user_id: this.user_id,
            com_id: this.com_id,
          },
        })
        .then((resp) => {
          if (resp.data.status == 1000) {
            this.LostListData = resp.data.data;
          }
        })
        .catch((error) => {});
    },

    drawCharts() {
      if (this.year == "") {
        this.year = new Date().getFullYear().toString();
      } else {
        this.year = this.year.getFullYear().toString();
      }
      this.$axios
        .get("/lost/count", {
          params: {
            year: this.year,
          },
        })
        .then((resp) => {
          if (resp.data.status == 1000) {
            //console.log(resp.data.data);
            let dataSourceLost = resp.data.data;

            // 基于准备好的满意度dom，初始化echarts实例
            let Lost = this.$echarts.init(document.getElementById("Lost"));
            // 绘制满意度图表
            Lost.setOption({
              // 线性渐变色
              visualMap: [
                {
                  show: false,
                  type: "piecewise",
                  pieces: [
                    {
                      gt: 0,
                      lte: 2,
                      color: "#93CE07",
                    },
                    {
                      gt: 2,
                      lte: 4,
                      color: "#FBDB0F",
                    },
                    {
                      gt: 4,
                      lte: 6,
                      color: "#FC7D02",
                    },
                    {
                      gt: 6,
                      lte: 8,
                      color: "#FD0100",
                    },
                    {
                      gt: 8,
                      lte: 10,
                      color: "#AA069F",
                    },
                    {
                      gt: 10,
                      color: "#AC3B2A",
                    },
                  ],
                  outOfRange: {
                    color: "#999",
                  },
                },
              ],

              dataset: {
                source: dataSourceLost,
              },
              // 全局调色盘。

              title: [
                {
                  left: "center",
                  text: this.year + "年客户流失数据",
                },
              ],
              tooltip: {
                trigger: "axis",
              },
              // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
              xAxis: {
                type: "category",
                axisTick: {
                  alignWithLabel: true,
                },
              },
              // 声明一个 Y 轴，数值轴。
              yAxis: {},
              series: [
                {
                  type: "line",
                  smooth: true,
                  showSymbol: false,
                  encode: {
                    // 将 "amount" 列映射到 X 轴。
                    x: "month",
                    // 将 "product" 列映射到 Y 轴。
                    y: "amount",
                  },
                },
              ],
            });
          }
        });
    },
  },

  mounted() {
    this.drawCharts();
    this.searchLost();
    this.$axios
      .get("/lostcompanies")
      .then((resp) => {
        if (resp.data.status == 200) {
          this.comList = resp.data.data;
        }
      })
      .catch((error) => {});

    this.$axios
      .get("/users/manager")
      .then((resp) => {
        if (resp.data.status == 1000) {
          this.userList = resp.data.data;
        }
      })
      .catch((error) => {});
  },
};
</script>
<style scope>

#lostTable .el-select .el-input {
  width: 240px;
}


</style>
